<template>
  <div class="layout-padding">
    <div class="layout-padding-view result-page">
      <div class="map-card">
        <el-tabs model-value="first" class="demo-tabs">
          <el-tab-pane label="基本信息" name="first">
            <el-text>
              该地块位于海伦市***县****镇*****村，耕地类型为：旱地，地块中心坐标为: ***, ****,占地面积：120亩;
            </el-text>
            <div class="mt20">
              <el-descriptions title="土壤类型及土壤理化性状信息" direction="vertical" :column="4" border>
                <el-descriptions-item label="成土母质">kooriookami</el-descriptions-item>
                <el-descriptions-item label="土类">18100000000</el-descriptions-item>
                <el-descriptions-item label="亚类">Suzhou</el-descriptions-item>
                <el-descriptions-item label="土属">Suzhou</el-descriptions-item>
                <el-descriptions-item label="土种">Suzhou</el-descriptions-item>
                <el-descriptions-item label="土壤质地">Suzhou</el-descriptions-item>
                <el-descriptions-item label="地貌类型">Suzhou</el-descriptions-item>
                <el-descriptions-item label="耕层厚度">Suzhou</el-descriptions-item>
                <el-descriptions-item label="有效土层厚度">Suzhou</el-descriptions-item>
                <el-descriptions-item label="耕层容重">Suzhou</el-descriptions-item>
                <el-descriptions-item label="土壤障碍层">Suzhou</el-descriptions-item>
                <el-descriptions-item label="土壤障碍">Suzhou</el-descriptions-item>
                <el-descriptions-item label="地形部位">Suzhou</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
          <el-tab-pane label="土壤养分" name="second">Config</el-tab-pane>
          <el-tab-pane label="环境质量" name="third">Role</el-tab-pane>
          <el-tab-pane label="预警结果" name="fourth">
            <div>
              <div class="el-descriptions__title mb20 mt20">总体分析结果</div>
              <el-table :data="tableData" border>
                <el-table-column prop="date" label="序号" width="100" />
                <el-table-column prop="name" label="警度级别" />
                <el-table-column prop="address" label="面积" />
                <el-table-column prop="percent" label="占比" />
              </el-table>
            </div>
            <div>
              <div class="el-descriptions__title mb20 mt20">专题分析结果</div>
              <div class="mb20">
                <el-segmented model-value="行政区划" :options="options" block />
              </div>
              <el-table :data="tableData" border>
                <el-table-column prop="date" label="序号" width="100" />
                <el-table-column prop="name" label="警度级别" />
                <el-table-column prop="address" label="面积" />
                <el-table-column prop="percent" label="占比" />
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div style="flex: 1">
        <MyMap>
          <ToolWrap>
            <BaseMap></BaseMap>
          </ToolWrap>
          <MapSupermapLayer
            url="http://123.127.160.203:8091/iserver/services/map-nercita_cloud/rest/maps/hailun_tr?prjCoordSys={epsgCode:4326}"
          ></MapSupermapLayer>
          <div class="map-card el-card is-always-shadow el-card__body"></div>
        </MyMap>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="trbbyj">
import { MyMap, BaseMap, ToolWrap, MapSupermapLayer } from '@/map';
import { reactive, ref } from 'vue';

const tableData = ref([]);

const options = ['行政区划', '利用方式', '土壤类型', '地形坡度'];
</script>

<style scoped lang="scss">
.result-page {
  display: flex;
}
.map-card {
  width: 520px;
  overflow: auto;
  padding: 8px 16px;
}
</style>
